<template>
	<view class="">
		<view class="header-area">
			<commonTab :nowCurrent="3"></commonTab>
			<view class="show-user-information-area u-margin-30 u-margin-top-50 u-border-radius-10 u-padding-30">
				<view class="u-flex u-margin-bottom-40">
					<u-avatar :src="form.avatar" :size="94"></u-avatar>
					<view class="u-margin-left-20">
						<view class="u-flex">
							<text class="xxl u-font-weight-500 pangmenzhengdao-font">{{form.name||''}} </text>
							<text class="nr u-color-666666  pangmenzhengdao-font u-padding-left-10">· {{form.company_name||'未填写'}}</text>
						</view>
						<view class="nr u-color-666666 u-margin-top-5 deyihei-font">{{form.tel||'待完善'}}</view>
					</view>
				</view>
				<view class="u-margin-top-40 u-flex-col u-color-333333 pangmenzhengdao-font">
					<u-icon :label="`公司: ${form.company_name||'待完善'}`" label-size="28" size="30"
						name="https://resource.lanbaozixun.com/uploads/images/202410091145252bd5e4474.png"></u-icon>
					<u-icon :label="`地址: ${form.company_site||'待完善'}`" label-size="28" size="30"
						name="https://resource.lanbaozixun.com/uploads/images/202410091145255225b0246.png"
						class="u-margin-top-15"></u-icon>
				</view>
			</view>
		</view>
		<view class="form-controls-area bg-white u-border-radius-10">
			<view class="u-flex form-item">
				<view class="u-padding-left-30 u-flex label">
					<text class="required-icon">*</text>
					<view class="u-padding-left-10"> 头像</view>
				</view>
				<view class="u-flex u-flex-1 u-padding-left-10 u-padding-right-20">
					<view class="u-flex-1"></view>
					<u-avatar @click="selectAvatar" bg-color="#F2F2F2" size="64" :src="form.avatar"></u-avatar>
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 u-flex label">
					<text class="required-icon">*</text>
					<view class="u-padding-left-10"> 姓名</view>
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入姓名" v-model="form.name" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 u-flex label">
					<text class="required-icon">*</text>
					<view class="u-padding-left-10"> 联系电话</view>
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入联系电话" v-model="form.tel" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 label">
					职位
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入职位" v-model="form.position" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 label">
					公司名称
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入公司名称" v-model="form.company_name" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 label">
					公司地址
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input @click="showRegion = true" input-align="right" type="select" placeholder="请选择省/市/区"
						v-model="companyProvincesAndCities" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 label">
					详细地址
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入详细地址" v-model="form.company_address" />
				</view>
			</view>
			<view class="u-flex form-item">
				<view class="u-padding-left-30 label">
					微信号
				</view>
				<view class=" u-flex-1 u-padding-left-10 u-padding-right-20">
					<u-input input-align="right" placeholder="请输入微信号" v-model="form.wechat_code" />
				</view>
			</view>
			<view class="u-flex  wechat-qr-code-area">
				<view class="u-padding-left-30 u-flex-col">
					<text class="">微信二维码</text>
					<text class="u-color-C9CDD4 u-padding-top-15">建议截图上传，更方便</text>
				</view>
				<view class="u-flex u-flex-1 u-padding-20 u-padding-top-30 u-padding-bottom-30">
					<view class="u-flex-1"></view>
					<u-image @click="selectWeChatQrCode" :src="form.wechat_qr_code" width="109rpx" height="109rpx"
						bg-color="#F7F8FA" :border-radius="15"></u-image>
				</view>
			</view>
		</view>
		<view class="bg-white u-border-radius-10 u-margin-top-30 u-padding-bottom-30">
			<view class="u-flex">
				<view class="u-padding-left-30 label">
					主营业务
				</view>
				<view class="u-flex-1 u-padding-20">
					<u-input input-align="right" type="select" placeholder="请选择" @click="selectBusiness" />
				</view>
			</view>
			<view class="xs u-color-0099FF u-margin-left-30 u-margin-right-30 u-margin-bottom-30">
				<text v-for="(v,k) in business" :key="k">{{v.name}} <text
						v-if="(k + 1) != business.length">|</text></text>
			</view>
			<u-input v-model="form.intro" class="u-margin-left-30 u-margin-right-30 " type="textarea"
				placeholder="请输入不少于10个字的简介" :maxlength="200" :height="180" :custom-style="{
				padding: '20rpx',
				borderRadius: '20rpx',
				background: '#FAFAFA'
			}" />
		</view>

		<view class="footer-area bg-white u-padding-30 u-margin-top-50 u-flex">
			<navigator hover-class="none" open-type="redirect" url="/yixu/pages/network_square/my_business_card/index" class="cancel-btn u-flex-1 u-margin-right-15 u-text-center">
				取消
			</navigator>
			<view class="save-btn u-flex-2 u-margin-left-15 white u-text-center" @click="$u.throttle(saveDatas, 500)">
				保存
			</view>
		</view>
		<common-tabbar></common-tabbar>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="area"></u-select>
		<businessSelection ref="business" :nowSelectIds="business" @selectBusinessCallback="selectBusinessCallback">
		</businessSelection>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/utils/tools";
	import area from '@/utils/area'
	import {
		modifyInformation,
		queryBasicInformation
	} from '@/api/userBusinessCard'
	import businessSelection from './components/business_selection.vue'
	import commonTab from '@/yixu/pages/network_square/components/common_tab.vue'
	export default {
		components:{
			commonTab,
			businessSelection
		},
		data() {
			return {
				area,
				list: [{
					name: '同行合作'
				}, {
					name: '同行名片'
				}, {
					name: '蓝豹社群',
				}, {
					name: '我的名片',
				}],
				current: 3,
				business: [],
				form: {
					tel: '',
					name: '',
					intro: '',
					avatar: '',
					position: '',
					business: '',
					wechat_code: '',
					company_name: '',
					wechat_qr_code: '',
					company_city_id: '',
					company_address: '',
					company_province_id: '',
					company_district_id: '',
				},
				company_site: '',
				showRegion: false,
				nowSelectImage: '',
				loadingShowStatus: true,
				companyProvincesAndCities: '',
			}
		},
		onLoad() {
			let _this = this;
			uni.$on('uAvatarCropper', path => {
				_this.uAvatarCropperCallback(path)
			})
			_this.queryBasicInformationFun();
		},
		methods: {
			regionChange(region) {
				this.form.company_province_id = region[0].value
				this.form.company_city_id = region[1].value
				this.form.company_district_id = region[2].value
				this.companyProvincesAndCities = region[0].label + '/' + region[1].label + '/' + region[2].label
			},
			async queryBasicInformationFun() {
				let _this = this;
				let d = await queryBasicInformation();
				if (d.code == 1) Object.keys(_this.form).forEach(function(v) {
					_this.form[v] = d.data[v] || '';
				})
				if (!_this.$u.test.isEmpty(_this.form.business)) _this.business = _this.form.business;
				_this.companyProvincesAndCities = (d.data.company_province || '') + '/' + (d.data.company_city || '') +
					'/' + (d.data.company_district || '')
				_this.loadingShowStatus = false;
			},
			uAvatarCropperCallback(path) {
				let _this = this;
				if (_this.$u.test.isEmpty(path)) return;
				uni.showLoading({
					title: "正在上传中...",
					mask: true,
				});	
				uploadFile(path)
					.then((res) => {
						uni.hideLoading();
						if(_this.nowSelectImage == 'avatar') _this.form.avatar = res.uri;
						if(_this.nowSelectImage == 'weChatQrCode') _this.form.wechat_qr_code = res.uri;
					})
					.catch(() => {
						uni.hideLoading();
						this.$toast({
							title: "上传失败",
						});
					});
			},
			selectBusiness() {
				this.$refs.business.shiftPopupStatus(true)
			},
			selectAvatar() {
				this.nowSelectImage = 'avatar';
				this.$u.route({
					url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 150,
						rectWidth: 150,
						fileType: 'jpg',
					}
				})
			},
			selectWeChatQrCode() {
				this.nowSelectImage = 'weChatQrCode';
				this.$u.route({
					url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 400,
						rectWidth: 400,
						fileType: 'jpg',
					}
				})
			},
			selectBusinessCallback(e) {
				this.business = e;
			},
			async saveDatas() {
				let _this = this;

				_this.form.business = _this.business.map(function(item) {
					return item.id;
				}).join(',')
				let d = await modifyInformation({
					..._this.form
				})
				
				if(d.code == 1){
					_this.$u.toast(d.msg)
					uni.redirectTo({
						url:'/yixu/pages/network_square/my_business_card/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: linear-gradient(to top, rgba(242, 242, 242, 1) 60%, rgba(120, 201, 255, 1) 100%);

		.show-user-information-area {
			background: url('https://resource.lanbaozixun.com/uploads/images/20241007224752ea8292514.png') no-repeat 100%;
		}

		.form-item {
			height: 98rpx;
			border-bottom: 2rpx solid #F2F2F2;

			.required-icon {
				color: #F53F3F;
			}

			.label {
				width: 180rpx;
				color: #1D2129;
			}
		}

		.u-color-C9CDD4 {
			color: #C9CDD4;
		}

		.footer-area {
			position: sticky;
			bottom: 0;
			box-shadow: 0 0 20rpx 10rpx #F2F2F2;

			.cancel-btn {
				color: #4B89EE;
				padding: 15rpx 0;
				border-radius: 100rpx;
				border: 2rpx solid #4B89EE;
			}

			.save-btn {
				padding: 15rpx 0;
				background: #4B89EE;
				border-radius: 100rpx;
				box-shadow: 0 4rpx 0 #68B9FC;
			}
		}
	}
</style>